<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <!-- Meta, title, CSS, favicons, etc. -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="avalonjs - 迷你简单易用的前端MVVM框架，让你的网站更快更炫更好用">
        <meta name="keywords" content="MVVM, CSS, JavaScript, framework, avalon, web development">
        <meta name="author" content="RubyLouvre,司徒正美">


        <title>avalon中文文档</title>
        <script src="//files.cnblogs.com/files/rubylouvre/avalon.shim.js"></script>

        <!-- Bootstrap core CSS -->
        <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

        <link href="../../assets/css/patch.css" rel="stylesheet">

        <!-- Documentation extras -->

        <link href="../../assets/css/docs.min.css" rel="stylesheet">
        <style>
            body,html{
               overflow-y: hidden;
            }
        </style>
        <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script>
        <script src="../../assets/js/ie-emulation-modes-warning.js"></script>
        <![endif]-->
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

        <!-- Favicons -->
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
        <link rel="icon" href="/favicon.ico">

    </head>
    <body>




        <div class="container bs-docs-container">

            <div class="row">
                <div class="col-md-9" role="main">


<h2 id='tutorial/concepts/computed.html'>计算属性</h2>

<p>计算属性，监控属性的一种，名字取自<code>emberjs</code>，相当于WPF的DependencyProperty（依赖属性），
    意即它的值是根据其他两个或两个以上的监控属性计算出来。 </p>
<div class="bs-callout bs-callout-warning">
    <p>在1.5+ 中,所有计算属性应该写在$computed对象中,计算属性为一个拥有get/set(set可选)的对象.
        它里面的<b>this</b>指向VM，不能用<code>avalon.define(id, function(vm){})</code>这里的vm。</p>
</div>

<div class="bs-callout bs-callout-warning">
    不能用计算属性生成对象及数组,换言之它就不能用在ms-repeat中.
</div>
<div ms-skip style='background:rgb(237,237,237);padding:4px;'><pre class='brush:html;gutter:false;toolbar:false'>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;计算属性&lt;/title&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
    &lt;script src="avalon.js"&gt;&lt;/script&gt;

    &lt;script&gt;
        avalon.define({
            $id: "test",
            firstName: "司徒",
            lastName: "正美",
            $computed: {
                fullName: { //一个包含set或get的对象
                    set: function(val) { //里面必须用this指向vm，但不能使用vm
                        var array = (val || "").split(" ");
                        this.firstName = array[0] || "";
                        this.lastName = array[1] || "";
                    },
                    get: function() {
                        return this.firstName + " " + this.lastName;
                    }
                }
            }
        })
    &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div ms-controller="test"&gt;
        &lt;p&gt;First name:
            &lt;input ms-duplex="firstName" /&gt;
        &lt;/p&gt;
        &lt;p&gt;Last name:
            &lt;input ms-duplex="lastName" /&gt;
        &lt;/p&gt;
        &lt;p&gt;Hello,
            &lt;input ms-duplex="fullName"&gt;
        &lt;/p&gt;
        &lt;div&gt;{{firstName +" "+ lastName }}&lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;</pre></div>
<script>
    avalon.define({
        $id: "computedtest",
        firstName: "司徒",
        lastName: "正美",
        $computed: {
            fullName: {//一个包含set或get的对象
                set: function (val) {//里面必须用this指向vm，但不能使用vm
                    var array = (val || "").split(" ");
                    this.firstName = array[0] || "";
                    this.lastName = array[1] || "";
                },
                get: function () {
                    return this.firstName + " " + this.lastName;
                }
            }
        }
    })
</script>
<div ms-important="computedtest">
    <p>First name: <input ms-duplex="firstName" /></p>
    <p>Last name: <input ms-duplex="lastName"  /></p>
    <p>Hello,    <input ms-duplex="fullName"></p>
    <div>{{firstName +"  "+ lastName }}</div>
</div>
<div class="bs-callout bs-callout-danger">
    <p>计算属性的get方法应该返回一个简单数据类型，比如下面这样做是错误的</p>
</div>
<div ms-skip style='background:rgb(237,237,237);padding:4px;'><pre class='brush:html;gutter:false;toolbar:false'>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head lang="en"&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;style type="text/css"&gt;
        .btn {
            display: inline-block;
            background-color: red;
            padding: 6px 10px;
        }
    &lt;/style&gt;
    &lt;script type="text/javascript" src="common/avalon1.38.1223.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
        var vm = avalon.define({
            $id: "test",
            num: 0,
            $computed: {
                cal: {
                    get: function() {
                        return [this.num - 1, this.num, this.num + 1];
                    }
                },
            },
            add: function() {
                vm.num++;
            }
        });
    &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div ms-controller="test"&gt;
        &lt;div&gt;{{ cal.join(",") }}&lt;/div&gt;
        &lt;div ms-repeat="cal"&gt;{{ el }}&lt;/div&gt;
        &lt;div class="btn" ms-click="add"&gt;add&lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;</pre></div>
<div class="bs-callout bs-callout-warning">
    ms-repeat只能对应一个子VM或一个监控数组
</div>



</div>
<div class="col-md-3" role="complementary">

</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="../../assets/highlight/shCore.js"></script>

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

